// web/src/app/(employee)/search/_components/search-employee-list.tsx
import React from 'react';
import {Company, Education, Employee, Hr} from "@prisma/client";
import {Card, CardContent, CardTitle} from "@/components/ui/card";
import {Badge} from "@/components/ui/badge";
import {formatPrice} from "@/lib/format";
import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar";
import {format} from "date-fns";
import Link from "next/link";

type EmployeeCombine = Employee & {
    company: Company
    hr: Hr,
    education: Education
}

const SearchEmployeeList = ({employees}: { employees: EmployeeCombine[] }) => {
    if (!employees || employees.length === 0) {
        return <div>没有记录</div>
    }
    return (
        <div className={`gap-y-4 flex flex-col items-center`}>
            {employees.map((e) => (
                <Link href={`/employee/${e.id}`} key={e.id} className={`w-[90%]`}>
                    <Card className={`hover:shadow-lg hover:scale-[1.03] transition-all
                 duration-200 active:shadow-none active:scale-100`}>
                        {/*<CardTitle>{e.name}</CardTitle>*/}
                        <CardContent className={`mt-6 flex flex-row justify-between px-12`}>
                            <div className={`flex flex-col gap-y-1`}>
                                <span className={`text-xl font-semibold`}>{e.name}</span>
                                <div className={`flex flex-row gap-x-2`}>
                                    <span className={`text-orange-600`}>{formatPrice(e.salary)}</span>
                                    <Badge variant={'secondary'}>{e.education.name}</Badge>
                                    <Badge variant={'success'}>hr: {e.hr.username}</Badge>
                                </div>
                            </div>
                            <div className={`flex-row flex gap-x-2`}>
                                <Avatar className={`size-14 rounded-md`}>
                                    <AvatarImage className={`rounded-md`} src={e.company?.image!}/>
                                    <AvatarFallback className={`bg-blue-400 text-white rounded-md`}>
                                        {e.company.name.charAt(0).toUpperCase()}
                                    </AvatarFallback>
                                </Avatar>
                                <div className={`flex-col flex gap-y-1`}>
                                <span className={`max-w-60 text-lg font-semibold truncate`}>
                                    {e.company.name}</span>
                                    <span className={`text-sm`}>
                                    {format(e.company.creationTime!, 'yyyy-MM-dd')}
                                </span>
                                </div>
                            </div>
                        </CardContent>
                    </Card>
                </Link>
            ))}
        </div>
    );
};

export default SearchEmployeeList;